<template>
  <a-layout style="min-height: 100vh">
    <a-layout-header :style="{background: '#1c64c0', color: '#fff',padding:'0 10px'}">
      <div class="header-left">
        <div class="hy-logo">
          <img src="http://guanli-pipnet.dev.com/imgs/png/logo-164e4863.png" alt="" style="width: 70px;height: 40px;">
          <div class="hy-title">广东化一环境科技公司</div>
        </div>        
      </div>
    </a-layout-header>
    <a-layout>
    <!-- 1.如何优化导航菜单代码？ -->
    <a-layout-sider
      :class="[isActive ? 'ant-layout-sider active' : 'ant-layout-sider hide']"
      breakpoint="lg"
      @collapse="onCollapse"
      collapsed-width="45px"
      collapsible
      style="background: #fff;"
    >
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item :key="'/user'">
          <user-outlined />
          <router-link to="user"><span class="nav-text" >平台用户</span></router-link>
        </a-menu-item>
        <a-menu-item :key="'/about'">
          <apartment-outlined />
          <router-link to="about"><span class="nav-text" >组织架构</span></router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-sider
      :class="[!isActive ? 'ant-layout-sider active' : 'ant-layout-sider hide']"
      breakpoint="lg"
      @collapse="onCollapse"
      collapsed-width="0"
      style="background: #fff;"
    >
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item :key="'/user'">
          <user-outlined />
          <router-link to="user"><span class="nav-text">平台用户</span></router-link>
        </a-menu-item>
        <a-menu-item :key="'/about'">
          <apartment-outlined />
          <router-link to="about"><span class="nav-text">组织架构</span></router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content :style="{ margin: '14px 16px 0' }">
      <!-- 多标签页组件 -->
      <TabView></TabView>
      <div :style="{ background: '#fff', height: 'auto' }" v-if="route.fullPath !== '/'">
        <router-view />
      </div>
      
    </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import TabView from '@/components/TabView.vue';
import { 
  UserOutlined,
  ApartmentOutlined,
} from '@ant-design/icons-vue';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const selectedKeys = ref<string[]>([route.path]);
const isActive = ref<boolean>(true);
const isShowText =ref<boolean>(true);

//绑定标签页的切换
watch(
  () => route.path,
  (path) => {
    selectedKeys.value = [path]
  }
)

const onCollapse = (collapsedBroken: boolean) => { 
  isShowText.value=!collapsedBroken
  if(document.documentElement.clientWidth < 992){
    isActive.value=false
  }else{
    isActive.value=true
  }
};

</script>
<style scoped>
.ant-layout{
  height: 100vh;
}

:deep(.ant-layout-sider > .ant-layout-sider-trigger) {
  background: rgb(255, 255, 255);
  color: black;
  border-top: 1px solid rgb(232, 232, 232);
}
:deep(.ant-layout-sider > .ant-layout-sider-zero-width-trigger){
  top: 35px;  
  background: rgb(255, 255, 255);
  color: black;
  box-shadow: 2px 1px 4px 1px #eaeaea;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

.active{
  display: inline-block;
}

.hide{
  display: none;
}

.header-left {
  width: 250px;
}

.header-left :hover {
  background: #39598d;
}

.hy-logo{
  display: flex;
  align-items: center;
  padding-left: 7px;
  transition: all .2s ease;
  justify-content: start;
}

.hy-title{
  margin-left: 8px;
  font-size: 16px;
  font-weight: 700;
  transition: all .5s;
}

.nav-text{
  margin: 10px;
}

</style>

